<template>
	
	<div>
		
		<scroller lock-x   @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="0" >
			
			<div>
		
				<div class="free_column" @click="toDetail(index)" v-for="(item,index) in newList">
					
					<div class="column_img">
						<img :src="item.cover_pic"/>
					</div>
					<div class="column_bottom" style="padding-bottom: 0.5rem;">
						<flexbox >
					      <flexbox-item :span="8"><div class="flex-demo">
					      	<flexbox>
						      <flexbox-item :span="9"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
						      	<flexbox>
							      <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="info.image"/></div></flexbox-item>
							      <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 8.5rem;overflow: hidden;height: 1.5rem;">{{info.name}}</div></div></flexbox-item>
							    </flexbox>
						      </div></flexbox-item>
						      <flexbox-item><div class="flex-demo padT19"></div></flexbox-item>
						    </flexbox>
					      </div></flexbox-item>
					      <flexbox-item>
					      	<div v-if="item.stage == '0'" class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">免费</div>
					      	<div v-else class="flex-demo" style="color:#6C6A6B ;font-size: 0.9rem;">第{{item.stage}}节</div>
					      </flexbox-item>
					   </flexbox>
					    <div style="width: 67%;padding-left: 0.5rem;">{{item.title}} </div>
					    <div style="padding-left: 10px;margin-top: 10px;color: #C7C7C7;font-size: 0.9rem;">
					    	<span>{{item.showtime}}更新</span>
					        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
					    </div>
					    
					</div>
				</div>
		        
		        <load-more tip="loading" v-if="loading"></load-more>
				
			</div>
			
		</scroller>
		
		<!--悬浮按钮-->
		<div>
			<button @click="toMovie" style="width: 100%;padding: 10px;font-size: 1.3rem;background: #8D0878;color: #FFFFFF;border: none;position: fixed;bottom: 0;z-index: 999999;">课程介绍</button>
		</div>

		
		
		<div @click="toHome" style="z-index: 9999999;position: fixed;bottom:3rem;left: 0.5rem;">
					
			<img src="../../static/image/shouye.png" style="width: 3rem;"/>
			
		</div>
		
		
		
	</div>
	
	
	
	
	
	
</template>

<script>
	import { base64, XSwitch, Group ,DatetimeView,PopupPicker,XButton,Scroller,LoadMore} from 'vux'
	
	export default {
		components: {
		    
		    XSwitch,Group,PopupPicker,XButton,DatetimeView,Scroller,LoadMore,base64
		},
		  
		  
		data(){
			return{
				list:'',
				info:'',
				lesson_id:'',
				access_token:'',
				lesson_info:'',
				onFetching: false,
		        loading:false,
		        newList:[],
		        page:1
		        
			}
		},
		
		methods:{
			
			//返回首页
			toHome(){
				
				this.$router.push({ path: '/'});
				
			},

			
			
			//获取详情
		    getDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/lesson-info&lesson_id=' + this.lesson_id + '&page=' + this.page+'&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.list = response.body.data.list
					this.info = response.body.data.info
					
					for(var i = 0 ; i < response.body.data.list.length ; i ++){
						
						this.newList.push(this.list[i])
						
					}

					this.$root.getShareDetail('大师为你解读经典电影怎么用在生活和公司经营上',this.info.name,'https://newzhouzi.fxm365.com/addons/zjhj_mall/core/web/temp/20180815160427.jpg');

					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		    },
		    
		    //触底加载
		    onScrollBottom:function(){
		      
		      if (this.onFetching) {
		        // do nothing
		      } else {
		        
		        console.log('开始')
		        
		        this.page = this.page + 1;
		        
		        console.log(this.page)
		        
		        this.getDetail();
		        
		        this.loading = true;
		        
		        
		        
		      this.onFetching = false
		        setTimeout(() => {
		
		
//		        this.info = this.info.concat(this.info);
		        this.onFetching = false
		          console.log('结束')
		          this.loading = false;
		        }, 500)
		        
		      }
		    },
			
			
			//跳转到详情
			toDetail(index){
				
				var lesson_id = this.newList[index].lesson_id
				var section_id = this.newList[index].id
				
				this.$router.push({ path: '/moviesDetail',name:'moviesDetail',params:{lesson_id:lesson_id,section_id:section_id}});
				
				
			},
			
		    //跳转到课程介绍
		    toMovie(){
		    	
		    	this.$router.push({ path: '/moviesIntroduce',name:'moviesIntroduce',params:{lesson_id:this.info.id}});
		    	
		    },
		    
		     //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },	
		},
		
		mounted(){
			
			var lesson_id = this.$route.params.lesson_id
			
			if(lesson_id != undefined){
				
				localStorage.setItem("lesson_id",lesson_id);
				
			}
			
			var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
            
            
           
    	   this.access_token = localStorage.getItem('access_token');
    	   this.lesson_id = localStorage.getItem('lesson_id');
			
			console.log(this.lesson_id)
			
			this.getDetail()
			
		}
		
		
	}
	
	
	
	
	
	
</script>

<style>
	
	
	
	.column_top{
		border-bottom: solid 1px #e3e3e3;
    	/*padding-left: 10px;*/
    	padding: 5px 10px;
	}
	.free_column{
		background: #FFFFFF;
	}
	
	
</style>